<template>
  <div id="youngcadresedit">
    <div v-show="pageLoading">数据加载中...</div>
    <div>
      <el-form :model="editForm" label-width="200px" ref="editForm" :inline="true" style="padding:10px 0 0;clear:both" v-show="!pageLoading" :rules="editFormRules">
        <table cellspacing="0" cellpadding="0" class="mytable">
          <tr>
            <th colspan="2">年度</th>
            <td>
              <template v-if="readOnly">{{editForm.nd}}</template>
              <el-form-item prop="nd" v-else>
                <el-date-picker v-model="editForm.nd" type="year" placeholder="选择要添加的年度" value-format="yyyy" format="yyyy" :disabled="!!editForm.id"></el-date-picker>
              </el-form-item>
            </td>
            <th colspan="2">司局或单位名称</th>
            <td style="vertical-align: middle;" colspan="3">
              <!-- <template>{{unitname}}</template> -->
              <template>{{editForm.sjhdwmc?editForm.sjhdwmc:unitname}}</template>
            </td>
          </tr>
          <tr>
            <th rowspan="3">领导班子职数</th>
            <th>正职</th>
            <td style="width:220px">
              <template v-if="readOnly">{{editForm.ldbzzszz}}</template>
              <el-form-item prop="ldbzzszz" v-else>
                <el-input-number v-model="editForm.ldbzzszz" style="width:170px" :min="0"></el-input-number>
              </el-form-item>
            </td>
            <th rowspan="3">实际配备数</th>
            <th>正职</th>
            <td style="width:230px">
              <template v-if="readOnly">{{editForm.sjpzszz}}</template>
              <el-form-item prop="sjpzszz" v-else>
                <el-input-number v-model="editForm.sjpzszz" style="width:170px" :min="0"></el-input-number>
              </el-form-item>
            </td>
            <th rowspan="3">空缺或超配情况</th>
            <td style="width:230px" rowspan="3">
              <div v-if="readOnly" v-html="editForm.kqhcpqk.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" rows="7" v-model="editForm.kqhcpqk" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>副职</th>
            <td style="width:220px">
              <template v-if="readOnly">{{editForm.ldbzzsfz}}</template>
              <el-form-item prop="ldbzzsfz" v-else>
                <el-input-number v-model="editForm.ldbzzsfz" style="width:170px" :min="0"></el-input-number>
              </el-form-item>
            </td>
            <th>副职</th>
            <td style="width:230px">
              <template v-if="readOnly">{{editForm.sjpzsfz}}</template>
              <el-form-item prop="sjpzsfz" v-else>
                <el-input-number v-model="editForm.sjpzsfz" style="width:170px" :min="0"></el-input-number>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <th>其他</th>
            <td style="width:220px">
              <template v-if="readOnly">{{editForm.ldbzzsqt}}</template>
              <el-form-item prop="ldbzzsqt" v-else>
                <el-input-number v-model="editForm.ldbzzsqt" style="width:170px" :min="0"></el-input-number>
              </el-form-item>
            </td>
            <th>其他</th>
            <td style="width:230px">
              <template v-if="readOnly">{{editForm.sjpzsqt}}</template>
              <el-form-item prop="sjpzsqt" v-else>
                <el-input-number v-model="editForm.sjpzsqt" style="width:170px" :min="0"></el-input-number>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <th colspan="2">近三年考核情况</th>
            <td colspan="6">
              <div v-if="readOnly" v-html="editForm.jsnkhqk.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.jsnkhqk" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>总体情况</th>
            <td colspan="7">
              <div v-if="readOnly" v-html="editForm.ztqk.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.ztqk" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>主要问题</th>
            <td colspan="7">
              <div v-if="readOnly" v-html="editForm.zywt.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.zywt" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>调整建议</th>
            <td colspan="7">
              <div v-if="readOnly" v-html="editForm.tzjy.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.tzjy" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>备注</th>
            <td colspan="7">
              <div v-if="readOnly" v-html="editForm.bz.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.bz" style="width:100%"></el-input>
            </td>
          </tr>
        </table>
        <div style="margin:0">
          <template v-if="!readOnly">
            <el-button type="primary" @click.native="editFormSubmit()" :loading="saveloading" style="margin-left:10px;">保存</el-button>
          </template>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    // timestamp: {
    //   handler (val) {
    //     console.log('aid')
    //     console.log(this.id)
    //     // this.$refs['editForm'].resetFields()
    //     this.editFormReset()
    //     if (this.id && this.id !== '') {
    //       this.getDetail(this.id)
    //     } else {
    //       this.getperson()
    //       this.editForm.sfzh = this.idCardNo
    //     }
    //     this.init()
    //   },
    //   immediate: true
    // },
    timestamp: {
      handler (val) {
        // console.log('aid')
        // console.log(val)
        // this.$refs['editForm'].resetFields()
        this.editFormReset()
        if (this.id && this.id !== '') {
          this.getDetail(this.id)
        } else {
          this.getunit()
          // this.editForm.sfzh = this.idCardNo
        }
      },
      immediate: true
    }
  },
  props: {
    id: '',
    readOnly: '',
    timestamp: '',
    idCardNo: '',
    unitname: '',
    unitcode: ''
  },
  data () {
    return {
      pageLoading: false,
      editForm: {
        id: '',
        sjhdwmc: '',
        nd: '',
        ldbzzszz: 0,
        ldbzzsfz: 0,
        ldbzzsqt: 0,
        sjpzszz: 0,
        sjpzsfz: 0,
        sjpzsqt: 0,
        kqhcpqk: '',
        jsnkhqk: '',
        ztqk: '',
        zywt: '',
        tzjy: '',
        bz: ''
      },
      editFormRules: {
        nd: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        ldbzzszz: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        ldbzzsfz: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        ldbzzsqt: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        sjpzszz: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        sjpzsfz: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        sjpzsqt: [
          { required: true, message: '必填项', trigger: 'change' }
        ]
      },
      saveloading: false
    }
  },
  methods: {
    getDetail (id) {
      let url = 'api/busUnit/getById'
      this.pageLoading = true
      this.$http
        .post(this.$http.defaults.analysisAPI + url, {id: id})
        .then(response => {
          this.pageLoading = false
          if (response.data.success) {
            this.editForm = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.pageLoading = false
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    handleSelect (item) {
      this.editForm.ldbzzszz = item.b01.b0183
      this.editForm.ldbzzsfz = item.b01.b0185
      this.editForm.sjpzszz = item.bianzhiUnitInfo.shi_lingdao_zheng
      this.editForm.sjpzsfz = item.bianzhiUnitInfo.shi_lingdao_fu
    },
    getunit () {
      let para = {
        idCardNo: this.idCardNo,
        unitname: this.unitname
        // unitname: '区委组织部123'
      }
      console.log(para)
      this.$http
        .get(`binfo/in/` + this.unitcode)
        .then(response => {
          console.log('获取成功')
          this.handleSelect(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    },
    editFormReset () {
      console.log('editFormReset')
      this.editForm = {
        id: '',
        sjhdwmc: '',
        nd: '',
        ldbzzszz: 0,
        ldbzzsfz: 0,
        ldbzzsqt: 0,
        sjpzszz: 0,
        sjpzsfz: 0,
        sjpzsqt: 0,
        kqhcpqk: '',
        jsnkhqk: '',
        ztqk: '',
        zywt: '',
        tzjy: '',
        bz: ''
      }
      if (this.$refs['editForm']) {
        this.$refs['editForm'].resetFields()
      }
    },
    editFormSubmit (reEnterFlag) {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.saveloading = true

          let para = {
            id: this.editForm.id,
            sjhdwmc: this.unitname,
            nd: this.editForm.nd,
            ldbzzszz: this.editForm.ldbzzszz,
            ldbzzsfz: this.editForm.ldbzzsfz,
            ldbzzsqt: this.editForm.ldbzzsqt,
            sjpzszz: this.editForm.sjpzszz,
            sjpzsfz: this.editForm.sjpzsfz,
            sjpzsqt: this.editForm.sjpzsqt,
            kqhcpqk: this.editForm.kqhcpqk,
            jsnkhqk: this.editForm.jsnkhqk,
            ztqk: this.editForm.ztqk,
            zywt: this.editForm.zywt,
            tzjy: this.editForm.tzjy,
            bz: this.editForm.bz
          }
          if (para.id) {
            this.saveDate(para, false)
          } else {
            this.$http
              .post(this.$http.defaults.analysisAPI + 'api/busUnit/getExistsUnitId', {
                'nd': this.editForm.nd,
                'dwmc': this.unitname
              })
              .then(response => {
                if (response.data.result) {
                  this.$confirm('该年度综合分析研判信息已存在，是否覆盖？', '提示', {
                    type: 'warning'
                  }).then(() => {
                    para.id = response.data.result
                    this.editForm.id = para.id
                    this.saveDate(para, false)
                  }).catch(() => {
                    this.$message({
                      message: '取消保存'
                    })
                    this.saveloading = false
                  })
                } else {
                  this.saveDate(para, true)
                }
              })
              .catch(error => {
                this.saveloading = false
                console.log(error)
                this.$message({
                  message: '网络保存失败:' + error,
                  type: 'error'
                })
              })
          }
        }
      })
    },
    saveDate (para, refreshFlag) {
      let url = 'api/busUnit/save'
      this.$http
        .post(this.$http.defaults.analysisAPI + url, para)
        .then(response => {
          this.saveloading = false
          if (response.data.success) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            if (refreshFlag) {
              this.$emit('refresh', this.unitname, this.editForm.nd)
              this.editFormReset()
            }
          } else {
            this.$message({
              message: '保存失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.saveloading = false
          console.log(error)
          this.$message({
            message: '网络保存失败:' + error,
            type: 'error'
          })
        })
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 150px;
    display: block;
  }
  #youngcadresedit h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0 0 20px;
  }
  #youngcadresedit .el-table{
    border: #95B8E7 solid 1px;
  }
  #youngcadresedit .mytable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #youngcadresedit .mytable th,
  #youngcadresedit .mytable td{
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align:top;
    line-height: 150%;
    height: 22px;
  }
  #youngcadresedit .mytable th{
    background:#C0DCF1;
    width:120px;
    vertical-align: middle;
  }
  #youngcadresedit .mytable .passed th{
    background:#F7E4BB;
  }
  #youngcadresedit .mytable .passed td{
    background:#FBF0DB;
  }
  .youngnopic{
    background: url(../assets/nopic.gif) no-repeat;
    width: 120px;
    height: 150px;
  }
</style>
<style scoped>
.details{
  font-weight:bolder;
  border-bottom:1px solid #95B8E7;
  padding:0 10px;
  min-height: 36px;
}
</style>
